import { Component, OnInit, Input } from '@angular/core';

import { HttpService } from 'src/app/shared/service/http.service';

import { AppGlobalService } from '../../shared/service/app-global.service';

@Component({
    selector: 'ManagevideoComponent',
    templateUrl: './managevideo.component.html',
    styleUrls: ['./managevideo.component.scss'],
})
export class ManagevideoComponent implements OnInit {
    constructor(
        private http: HttpService,
        private appGlobalService: AppGlobalService) {
    }
    @Input() tagData: any;
    playvodio: any; // 播放的录像路劲
    playlabel: any; // 播放的录像名称
    // 筛选及页面数据参数
    params: any = {}; // 需要传的参数
    // 当前页数，默认1
    pageNo = 1;
    sessionId: any;
    ngOnInit() {
        // 获取sessionid
        this.sessionId = localStorage.getItem('sessionId');
        /* 设置音频去掉下载和画中画按钮 */
        /* let myVid = document.getElementById("videoid");
        myVid['disablePictureInPicture'] = true; */
        /*   this.tagData.data={
              "total":9,
              "data":[
                  {
                       "submit":{
                                    "content":{

                                    },
                                    "id":"071d9ea1-2390-4752-b434-e5399b9af290"
                                },
                      "image":"xxx.png",
                      "paying":"false",
                      "videoUrl":"https://v.youku.com/v_show/id_XMTgxMjI2Mzg3Mg==.html?spm=a2h0j.11185381.listitem_page1.5!8~A",
                      "payTimes":"",
                      "label":"百倍盈-第三节，趋势方向（下）"
                  },
                  {
                      "image":"xxx.png",
                      "paying":"false",
                      "videoUrl":"https://v.youku.com/v_show/id_XMTgxMjI2NjQ2OA==.html?spm=a2h0j.11185381.listitem_page1.5!6~A",
                      "payTimes":"",
                      "label":"百倍盈-第四节，客户价值（上）"
                  },
                  {
                      "image":"xxx.png",
                      "paying":"false",
                      "videoUrl":"https://v.youku.com/v_show/id_XMTgxMjI2ODYxMg==.html?spm=a2h0j.11185381.listitem_page1.5!4~A",
                      "payTimes":"",
                      "label":"百倍盈-第五节，客户价值（中）"
                  },
                  {
                      "image":"xxx.png",
                      "paying":"false",
                      "videoUrl":"https://v.youku.com/v_show/id_XMTgxMjI1MjExNg==.html?spm=a2h0j.11185381.listitem_page1.5!10~A",
                      "payTimes":"",
                      "label":"百倍盈-第六节，客户价值（下）"
                  },
                  {
                      "image":"xxx.png",
                      "paying":"false",
                      "videoUrl":"https://v.youku.com/v_show/id_XMTgxMjI2MjE2MA==.html?spm=a2h0j.11185381.listitem_page1.5!3~A",
                      "payTimes":"",
                      "label":"百倍盈-第七节，盈利模式"
                  },
                  {
                      "image":"xxx.png",
                      "paying":"false",
                      "videoUrl":"https://v.youku.com/v_show/id_XMTgxMjI1MjIwOA==.html?spm=a2h0j.11185381.listitem_page1.5!9~A",
                      "payTimes":"",
                      "label":"百倍盈-第八节营销系统"
                  },
                  {
                      "image":"xxx.png",
                      "paying":"false",
                      "videoUrl":"https://v.youku.com/v_show/id_XMTU4MjA2MDAxMg==.html?spm=a2h0k.11417342.soresults.dtitle",
                      "payTimes":"",
                      "label":"百倍盈 — 年赚千万的店铺经营方案"
                  },
                  {
                      "image":"http://oss-ppw.pupuwang.com/file_e75f43e57e3b6a614bc9c0d838516097.png",
                      "paying":"false",
                      "videoUrl":"http://oss-ppw.pupuwang.com/video_de43635911d019464845396d6f00eec8.mp4",
                      "payTimes":"",
                      "label":"百倍盈-第一节，建立赚钱系统"
                  },
                  {
                      "image":"http://oss-ppw.pupuwang.com/file_79b5e06b8e2a22bb1edbd2f7c2133c2b.jpg?x-oss-process=image/resize,h_168",
                      "paying":"true",
                      "videoUrl":"http://oss-ppw.pupuwang.com/video_de43635911d019464845396d6f00eec8.mp4",
                      "payTimes":"",
                      "label":"百倍盈-第二节，趋势方向（上）"
                  }
              ],
              "submit":{
                  "content":{
                      "website_config_website_config_id":"5d53c177ff4e8d1a5c001260",
                      "pageSize":"3",
                      "pageNo":"1"
                  },
                  "id":"5bd19493-cbb6-4a17-ae59-fba4009a6724"
              },
              "pageNo":1,
              "pageSize":"10"
          }; */
        // 初始化播放的录像路劲
        this.tagData.data.data.forEach(element => {
            element.payTimes = this.tranNumber(element.payTimes, 1);
            if (element.paying === "true") {
                this.playvodio = element.videoUrl;
                this.playlabel = element.label;
                if (element.submit) {
                    element.submit.sessionId = this.sessionId;
                    // 请求获取新数据
                    this.http.post('application/submit', element.submit, res => {
                        // 请求数据成功
                    });
                }
            }
        });
        this.tranNumber(12222, 2);
    }
    // 点击列表
    payingclick(item) {
        this.playvodio = item.videoUrl;
        this.tagData.data.data.forEach(element => {
            if (element.videoUrl === item.videoUrl) {
                this.playvodio = element.videoUrl;
                this.playlabel = element.label;
                element.paying = "true";
                if (element.submit) {
                    element.submit.sessionId = this.sessionId;
                    // 请求获取新数据
                    this.http.post('application/submit', element.submit, res => {
                        // 请求数据成功
                    });
                }
            } else {
                element.paying = "false";
            }
        });
    }
    /* 上划获取翻页 */
    loadMoreData(event) {
        this.params = this.tagData.data.submit;
        // // 请求下一个页面
        this.pageNo = this.pageNo + 1;
        // // 参数
        this.params.content.pageNo = this.pageNo;
        this.params.sessionId = this.sessionId;
        // 请求获取新数据
        this.http.post('application/submit', this.params, res => {
            // 请求数据成功
            if (res.success) {
                const resList = res.data.data;
                // 追加返回数据
                if (resList && resList.length > 0) {
                    // 追加数据
                    resList.map(v => {
                        v.payTimes = this.tranNumber(v.payTimes, 1);
                        this.tagData.data.data.push(v);
                    });
                } else {
                    event.target.disabled = true;
                    // 没有数据了
                    // this.appGlobalService.showToast('没有数据了...', 1000, 'middle');
                }
            } else {
                // 请求失败，更新当前页数
                this.pageNo = this.pageNo - 1;
                // 请求数据失败
                this.appGlobalService.showToast(res.message, 2000, 'middle');
            }
            event.target.complete();
        }, err => {
            // 请求失败，更新当前页数
            this.pageNo = this.pageNo - 1;
            // 请求数据失败
            this.appGlobalService.showToast(err.message, 2000, 'middle');
            event.target.complete();

        });
    }
    // 返回上个页面
    async cancel() {
        this.appGlobalService.goBack();
        this.appGlobalService.popTarget();
    }
    // 转播放量
    tranNumber(num, point) {
        const numStr = num.toString();
        // 十万以内直接返回
        if (numStr.length < 5) {
            let result = '', counter = 0;
            num = (num || 0).toString();
            for (let i = num.length - 1; i >= 0; i--) {
                counter++;
                result = num.charAt(i) + result;
                if (!(counter % 3) && i !== 0) { result = ',' + result; }
            }
            return result;
        } else if (numStr.length > 4) {
            // 大于6位数是十万 (以10W分割 10W以下全部显示)
            const decimal = numStr.substring(numStr.length - 4, numStr.length - 4 + point);
            // tslint:disable-next-line:radix
            return parseFloat(parseInt(num / 10000 + "") + '.' + decimal) + '万';
        }
    }
}
